<template>
  <div class="">
    <img class="upload-img"  alt="点击放大预览" title="点击放大预览" @click="handlePreview" v-if="modelImg.imageSrc" :src="modelImg.imageSrc"/>
    <label class="upload-label" for="uploads" ></label>
    <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)" ref="uploadImg">
    <j-image-open ref="imagePreview"></j-image-open>
    <img-cropper ref="imgCropper" :bizPath="bizPath" @setSrc="setSrc" ></img-cropper>
  </div>
</template>

<script>
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getFileAccessHttpUrl } from '@/api/manage'
  import ImgCropper from '../../views/jeecg/ImgCropper'
  import JImageOpen from './JImageOpen'


  export default {
    name: 'JImageCropper',
    components: {
      JImageOpen,
      ImgCropper
    },
    /*监听图片值*/
    watch:{
      value: {
        handler(val,oldValue) {
          this.modelImg.imageSrc = getFileAccessHttpUrl(val);
        },
        //立刻执行handler
        immediate: true
      }
    },
    data(){
      return {
        modelImg: {
          imageSrc: '',
        },
      }
    },
    props:{
      /*这个属性用于控制文件上传的业务路径*/
      bizPath:{
        type:String,
        required:false,
        default:"temp"
      },
      height:{
        type:Number,
        required:true,
        default:120
      },
      width:{
        type:Number,
        required:true,
        default:300
      },
      fixedBox:{
        type:Boolean,
        required:false,
        default: false
      },
      /*水印*/
      watermark:{
        type:Boolean,
        required:false,
        default: false
      },
      /*是否系統上傳*/
      system:{
        type:Boolean,
        required:false,
        default: false
      },
      value:{
        type: String,
        required: false
      },

    },

    methods:{
      uploadImg(e) {
        //上传图片
        // this.option.img
        var file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        var reader = new FileReader();
        reader.onload = e => {
          let data;
          if (typeof e.target.result === "object") {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          //console.log(file)
          this.$refs.imgCropper.option.img = data;
          this.$refs.imgCropper.option.name = file.name;
          this.$refs.imgCropper.option.autoCropWidth = this.width;//宽度
          this.$refs.imgCropper.option.autoCropHeight = this.height;//高度
          this.$refs.imgCropper.option.fixedBox = this.fixedBox;//是否可以拉伸框
          this.$refs.imgCropper.formData.system = this.system;//是否可以拉伸框
          this.$refs.imgCropper.formData.watermark = this.watermark;//是否可以拉伸框
          this.$refs.imgCropper.visible = true;//显示裁剪页面
          this.$refs.uploadImg.value = ''
        };
        // 转化为blob
        reader.readAsArrayBuffer(file);
      },


      setSrc(imageSrc){
        //console.log(imageSrc)
        this.$set(this.modelImg,'imageSrc',getFileAccessHttpUrl(imageSrc));
        //console.log(this.modelImg.imageSrc)
        this.$emit('change', imageSrc);//v-model 赋值
      },
      handlePreview(){
        this.$refs.imagePreview.imageOpen(this.modelImg.imageSrc);
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style scoped>
  .upload-label{
    width: 120px;
    height: 120px;
    background-image: url(./img/upload-image.png);
    background-size: cover;
    box-sizing: border-box;
    padding-top: 45px;
    display: inline-block;
    cursor: pointer;
    border: #cccccc 1px dashed;
    vertical-align: middle;
  }
  .upload-label:hover{
    border: #0080ff 1px dashed;
  }
  .upload-img{
    height: 120px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border: #cccccc 1px dashed;
    pointer-events: auto !important;
  }
  .upload-img:hover{
    border: #0080ff 1px dashed;
  }

  .jeecg-form-container-disabled fieldset[disabled] .upload-img{
    -ms-pointer-events: auto !important;
    pointer-events: auto !important;
  }
</style>
